<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<nav-bar title="购物车" :backIcon="false" bgColor="#f3f4f6"></nav-bar>
		</view>
		<view>
			<car-list v-if="carList.length > 0" ref="mycar" :carList="carList" @allSelBtn="allSelBtn" @selShop="selShop"
				@selGoods="selGoods" @jsbtn="jsbtn" @delbtn="delbtn" @changeNum="changeNum"></car-list>
			<u-empty v-else mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
		</view>

		<!-- 底部导航 -->
		<!-- <view>
			<tab-bar></tab-bar>
		</view> -->
	</view>
</template>

<script>
	import carList from '@/components/car-list/car-list.vue'
	export default {
		components: {
			carList,
		},
		data() {
			return {
				maskTitle: '',
				carList: [{
						shopId: 1,
						title: "天猫超市",
						total: 2,
						goodsAmount: 6051,
						selected: true,
						glist: [{
								id: 236,
								gid: 47,
								name: "毛巾（厚）",
								img: "",
								gsId: 72,
								spec_key_name: "尺寸:M 颜色:黑色",
								spec: [{
									name: "尺寸",
									value: "M"
								}, {
									name: "颜色",
									value: "黑色"
								}],
								price: 19,
								number: 1,
								stock: 193,
								selected: true,
							},
							{
								id: 237,
								gid: 45,
								name: "盆栽",
								img: "",
								gsId: 65,
								spec_key_name: "件装:1件居家必备:枕头",
								spec: [{
									name: "件装",
									value: "1件"
								}, {
									name: "居家必备",
									value: "枕头"
								}],
								price: 6001,
								number: 1,
								stock: 77,
								selected: true,
							}
						]
					},
					{
						shopId: 2,
						title: "京东超市",
						total: 11,
						selected: true,
						goodsAmount: 6051,
						glist: [{
								id: 188,
								gid: 31,
								name: "橘子",
								img: "",
								gsId: 50,
								spec_key_name: "件装:2件",
								spec: [{
									name: "件装",
									value: "2件"
								}],
								price: 3,
								number: 10,
								stock: 78,
								selected: true,
							},
							{
								id: 189,
								gid: 35,
								name: "积分购买测试",
								img: "",
								gsId: 56,
								spec_key_name: "尺寸:M 颜色:黑色",
								spec: [{
									name: "尺寸",
									value: "M"
								}, {
									name: "颜色",
									value: "黑色"
								}],
								price: 1,
								number: 1,
								stock: 97,
								selected: true,
							},
							{
								id: 199,
								gid: 35,
								name: "积分购买测试",
								img: "",
								gsId: 56,
								spec_key_name: "尺寸:M 颜色:黑色",
								spec: [{
									name: "尺寸",
									value: "M"
								}, {
									name: "颜色",
									value: "黑色"
								}],
								price: 1,
								number: 1,
								stock: 97,
								selected: true,
							},
							{
								id: 120,
								gid: 35,
								name: "积分购买测试",
								img: "",
								gsId: 56,
								spec_key_name: "尺寸:M 颜色:黑色",
								spec: [{
									name: "尺寸",
									value: "M"
								}, {
									name: "颜色",
									value: "黑色"
								}],
								price: 1,
								number: 1,
								stock: 97,
								selected: true,
							}
						]
					}
				]
			}
		},
		onLoad() {
			this.updateBadge();
		},
		onShow() {

		},
		methods: {
			selGoods: function(carList) {
				var that = this;
				that.carList = carList;
			},
			selShop: function(carList) {
				var that = this;
				that.carList = carList;
			},
			allSelBtn: function(carList) {
				var that = this;
				that.carList = carList;
			},
			jsbtn: function(ids) { //结算按钮
				var that = this;
				console.log(ids);
				var that = this;
				/* 
				 跳转结算页面
				 
				*/
			},
			delbtn: function(delId) { //删除按钮
				let list = this.carList
				/* 
				 请求接口数据
				 
				*/
				for (let i = 0; i < list.length; i++) {
					for (let k = 0; k < list[i].glist.length; k++) {
						if (list[i].glist[k].id == delId) {
							list[i].glist.splice(k, 1);
							k--
						}
					}
					if (list[i].glist.length == 0) { //若当前店铺商品删除完，删除当前店铺
						list.splice(i, 1);
						i--
					}
				}
				this.carList = list;

				this.$refs.mycar.getAllMount(list); //计算价格展示

				this.updateBadge(); // 更新徽标信息
			},
			changeNum: function(total, carList, shopIndex, gIndex, number, id, type) {
				var that = this;
				/* 
				 请求接口数据
				 
				*/
				carList[shopIndex].glist[gIndex].number = number;
				if (type == 0) {
					carList[shopIndex].total = total - 1;
				} else {
					carList[shopIndex].total = total + 1;
				}
				that.carList = carList;
				that.$refs.mycar.getAllMount(carList); //计算价格展示
			},
			updateBadge() {
				let length = 0;
				if (this.carList.length > 0) {
					let list = this.carList;
					
					for (let i = 0; i < list.length; i++) {
						for (let k = 0; k < list[i].glist.length; k++) {
							length++;
						}
					}
					uni.setTabBarBadge({
						index: 3,
						text: length.toString()
					})
				} else {
					uni.removeTabBarBadge({
						index: 3,
					})
				}
				// this.$u.vuex("tabbar.cartBadge", length)
			}
		},
		onReachBottom() {

		},
		onShareAppMessage() {

		}
	}
</script>

<style lang="scss" scoped>
	.navbar{
		margin-bottom: 20rpx;
	}
	.container {
		height: 100%;
	}
	.car-list {
		width: 100%;
		height: 100%;
	}
</style>